﻿@using System.ComponentModel

<Table TItem="Data" DataSource="data" @bind-PageSize="pageSize">
    <ChildContent>
        <PropertyColumn Property="c=>c.Name">
            <a>@context.Name</a>
        </PropertyColumn>
        <PropertyColumn Property="c=>c.Age"></PropertyColumn>
        <PropertyColumn Property="c=>c.Address">
            <TitleTemplate>
                <span><Icon Type="@IconType.Outline.Environment" /> Address</span>
            </TitleTemplate>
        </PropertyColumn>
        <PropertyColumn Property="c=>c.Tags">
            @foreach (var tag in context.Tags)
            {
                var color = tag.Length > 5 ? TagColor.GeekBlue : TagColor.Green;
                if (tag == "loser")
                {
                    color = TagColor.Volcano;
                }
                <Tag Color="@color">@tag</Tag>
            }
        </PropertyColumn>
    </ChildContent>

    <PaginationTemplate>
        <Pagination Class="@(context.PaginationClass + " my-custom-pagination")"
                    Total="context.Total"
                    PageSize="context.PageSize"
                    Current="context.PageIndex"
                    ShowSizeChanger
                    OnChange="context.HandlePageChange" />
    </PaginationTemplate>
</Table>

@code {
    Data[] data = new Data[]
    {
        new()
        {
            Key = "1",
            Name = "John Brown",
            Age = 32,
            Address = "New York No. 1 Lake Park",
            Tags = new[] {"nice", "developer"}
        },
        new()
        {
            Key = "2",
            Name = "Jim Green",
            Age = 42,
            Address = "London No. 1 Lake Park",
            Tags = new[] { "loser"}
        },
        new()
        {
            Key = "3",
            Name = "Joe Black",
            Age = 32,
            Address = "Sidney No. 1 Lake Park",
            Tags = new[] { "cool", "teacher" }
        }
    };

    private int total => data.Count();
    private int pageSize = 1;

    public class Data
    {
        [DisplayName("Key")]
        public string Key { get; set; }

        [DisplayName("Name")]
        public string Name { get; set; }

        [DisplayName("Age")]
        public int Age { get; set; }

        [DisplayName("Address")]
        public string Address { get; set; }

        [DisplayName("Tags")]
        public string[] Tags { get; set; }
    }
}

<style>
    .my-custom-pagination {
        margin: 15px 0;
    }

        .my-custom-pagination .ant-pagination-item,
        .my-custom-pagination .ant-pagination-item-link {
            border-radius: 100%;
        }
</style>